﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ControlTypes.aspx.cs" Inherits="BugSysSolution.PageTemplate.ControlTypes" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Knockout.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="readout">
            <h3>What's in the model?</h3>
            <table>
                <tr>
                    <td class="label">Text value:</td>
                    <td data-bind="text: stringValue"></td>
                </tr>
                <tr>
                    <td class="label">Password:</td>
                    <td data-bind="text: passwordValue"></td>
                </tr>
                <tr>
                    <td class="label">Bool value:</td>
                    <td data-bind='text: booleanValue() ? "True" : "False"'></td>
                </tr>
                <tr>
                    <td class="label">Selected option:</td>
                    <td data-bind="text: selectedOptionValue"></td>
                </tr>
                <tr>
                    <td class="label">Multi-selected options:</td>
                    <td data-bind="text: multipleSelectedOptionValues"></td>
                </tr>
                <tr>
                    <td class="label">Radio button selection:</td>
                    <td data-bind="text: radioSelectedOptionValue"></td>
                </tr>
            </table>
        </div>
        <h3>HTML controls</h3>
        <table>
            <tr>
                <td class="label">Text value (updates on change):</td>
                <td>
                    <input data-bind="value: stringValue" /></td>
            </tr>
            <tr>
                <td class="label">Text value (updates on keystroke):</td>
                <td>
                    <input data-bind='value: stringValue, valueUpdate: "afterkeydown"' /></td>
            </tr>
            <tr>
                <td class="label">Text value (multi-line):</td>
                <td>
                    <textarea data-bind="value: stringValue"> </textarea></td>
            </tr>
            <tr>
                <td class="label">Password:</td>
                <td>
                    <input type="password" data-bind="value: passwordValue" /></td>
            </tr>
            <tr>
                <td class="label">Checkbox:</td>
                <td>
                    <input type="checkbox" data-bind="checked: booleanValue" /></td>
            </tr>
            <tr>
                <td class="label">Drop-down list:</td>
                <td>
                    <select data-bind="options: optionValues, value: selectedOptionValue"></select></td>
            </tr>
            <tr>
                <td class="label">Multi-select drop-down list:</td>
                <td>
                    <select multiple="multiple" data-bind="options: optionValues, selectedOptions: multipleSelectedOptionValues"></select></td>
            </tr>
            <tr>
                <td class="label">Radio buttons:</td>
                <td>
                    <label>
                        <input type="radio" value="Alpha" data-bind="checked: radioSelectedOptionValue" />Alpha</label>
                    <label>
                        <input type="radio" value="Beta" data-bind="checked: radioSelectedOptionValue" />Beta</label>
                    <label>
                        <input type="radio" value="Gamma" data-bind="checked: radioSelectedOptionValue" />Gamma</label>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>
<script type="text/javascript">
    var model = function () {
        this.stringValue = ko.observable("abc");
        this.passwordValue = ko.observable("123abc");
        this.booleanValue = ko.observable(true);
        this.optionValues = ko.observableArray(["xxx1", "xxx2", "xxx3"]);
        this.selectedOptionValue = ko.observableArray(["xxx1", "xxx2", "xxx3"]);
        this.multipleSelectedOptionValues = ko.observableArray(["xxx1"]);
        this.radioSelectedOptionValue = ko.observable("Beta");
    }

    ko.applyBindings(new model());
</script>